<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>TEXTBOX COMPONENT</title>
    <link href="../css/common/bi_app_style.css" rel="stylesheet"  type="text/css">
    <link href="../api/css/cupertino/jquery-ui-1.10.1.custom.min.css"   type="text/css" rel="stylesheet">
    <link href="../api/css/jquery.contextMenu.css" rel="stylesheet" type="text/css">
    <script src="../api/js/jquery-1.8.3.js"></script>
    <script src="../api/js/jquery-ui-1.10.1.custom.min.js"></script>
    <script src="../api/js/jquery.contextMenu.js" type="text/javascript"></script>
    <script type='text/JavaScript' src='../../zbw_reporting/scripts/framework_include.js'></script>

    <!-- [REQUIRED] SCRIPT FOR INTEGRATION WITH BOI -->
    <script type="text/javascript">
        //comment this line when done testing
        //$(function(){initialize();});

        var BOI = parent.BOI; //REQUIRED
        var properties = { //REQUIRED
            app_id: undefined
        };
        window.onload = function() {};
        var initialize = function initialize() {//REQUIRED //initialization function ... see below..
            /*---- begin your component custom initialization code ----*/
            BOI.Events.addListener(BOI.Events.favchange, function(args){
                load(properties.app_id);
            });
            load(properties.app_id);
            //set property values to dom elements if needed
            refreshProperties();
        };
        var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
        };
        var refreshProperties = function refreshProperties(){ //REQUIRED function to be called by parent when a property change occurs
        };
    </script>

    <!-- COMPONENT SCRIPT -->
    <script type="text/javascript">
        function load(app_id)
        {
            //$('ul').html('');
            BOI.loadFavorites(app_id,function(favs){
                for(var i in favs)
                {
                    var li = '<li><span class="del-item" onclick="deleteFavorite(\'' + favs[i].tech_name + '\')"></span> <a id="' + favs[i].id + '" onclick="openReport(this)" href="javascript:void()">' + favs[i].label + '</a></li>';
                    $('ul').append(li);
                }
                var fid = parent.BOILib.Util.getUrlParam('fid');
                if(fid != "")
                {
                    //load the report
                    BOI.raiseEvent(BOI.Events.favopen, [fid]);
                }
            });

            <!-- 2/6/2014 Added by jaroudnh to enhance the look of the list-->
            $("#menu").menu();
            $( "button" ).button();
        }

        function openReport(elem)
        {
            BOI.Events.raiseEvent(BOI.Events.favopen, [$(elem).attr('id')]);
        }

        $(function(){
            $.contextMenu({
                zIndex: 10000,
                selector: '.favorite',
                callback: function(key, options) {
                    var node_id = options.$trigger.attr('id');
                    var app_id = options.$trigger.attr('app_id');

                    //delete favorite
                    var record = parent.BOIData.data.createRecord({APP_ID: [app_id], NODE_ID: [node_id]});
                    var req = parent.BOIData.request.prepare('ZCL_MYBW_FAVORITES', 'DELETE',[record]);
                    parent.BOIData.request.perform(req, 'text','post',function(data){
                        //  alert($(data).find('MESSAGE').text());
                        BOI.BOILib.Util.log($(data).find('MESSAGE').text(),true);
                        load(properties.app_id);
                    });
                },
                items:  {
                    "delete": {name: "Delete", icon: "delete"}
                }

            });
        });

        //Added by jaroudnh on 2/18/2014 to call add to favorites
        function addToFavorites()
        {
            BOI.Events.raiseEvent("addToFavorites", []);
        }

        //Added by jaroudnh on 2/18/2014 to remove favorites which will be called from favorites component.
        function deleteFavorite(tech_name)
        {
            var records, record, param, req, class_name, method_name;
            records = [];
            class_name = "ZCL_MYBW_FAVORITES";
            method_name = "DELETE";

            record = new BOI.BOIData.data.createRecord({
                APP_ID:[BOI.app_id],
                REPORT_ID:[tech_name]
            });

            records.push(record);

            req = BOI.BOIData.request.prepare(class_name, method_name, records);
            BOI.BOIData.request.perform(req, 'text', 'POST', function (data) {
                BOI.BOILib.Util.log($(data).find('MESSAGE').text(), true);
            });
            load(BOI.app_id);
        }
    </script>
    <style type="text/css">
        body { background: none; overflow: hidden;}
    </style>
</head>
<body>
<!-- 2/6/2014 Edited by jaroudnh to add "add to favorites" button-->
<div class="fav-container">
    <button class="add-fav-btn" onclick="addToFavorites();">Add to Favorites</button>
    <div class="close"></div>
    <ul id="menu">
    </ul>
</div>
</body>
</html>